<template>
  <div class="formStyle">
    <el-form
      size="small"
      label-width="80px"
      :model="hotelDetail"
      :rules="hotelRules"
    >
      <el-form-item label="改变类型">
        <el-select placeholder="请选择改变类型" v-model="updataType">
          <el-option
            v-for="type in types"
            :key="type.id"
            :value="type.id"
            :label="type.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <div v-if="!updataType" class="mainInput">
        <el-form-item size="small" prop="address" label="酒店定位">
          <el-input
            type="text"
            prefix-icon="el-icon-location"
            autofocus="true"
            :placeholder="hotelDetail.address"
            v-model.lazy="hotelDetail.address"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item size="small" prop="name" label="酒店名称">
          <el-input
            type="text"
            prefix-icon="el-icon-house"
            :placeholder="hotelDetail.name"
            v-model.lazy="hotelDetail.name"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" prop="phone" label="酒店电话">
          <el-input
            type="text"
            prefix-icon="el-icon-phone"
            :placeholder="hotelDetail.phone"
            v-model.lazy="hotelDetail.phone"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" prop="hotelImg" label="酒店图示">
          <el-input
            type="text"
            prefix-icon="el-icon-picture"
            :placeholder="hotelDetail.hotelImg"
            v-model.lazy="hotelDetail.hotelImg"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" prop="hotelInfo" label="酒店详情">
          <el-input
            type="textarea"
            v-model.lazy="hotelDetail.hotelInfo"
            :placeholder="hotelDetail.hotelInfo"
            maxlength="20"
            minlength="8"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit()">立即更改</el-button>
          <el-button>清空</el-button>
        </el-form-item>
      </div>
      <div v-else class="mainInput">
        <el-form-item label="更改选项">
          <el-select placeholder="请选择改变类型" v-model="roomUpdataType">
            <el-option
              v-for="type in roomTypes"
              :key="type.id"
              :value="type.id"
              :label="type.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <template v-if="roomUpdataType === 1">
          <el-form-item size="small" prop="address" label="房间类型">
            <el-input
              type="text"
              prefix-icon="el-icon-s-home"
              v-model.lazy="roomDetail.Name"
            ></el-input>
          </el-form-item>
          <el-form-item size="small" prop="address" label="房间数量">
            <el-input
              type="text"
              prefix-icon="el-icon-tickets"
              v-model.lazy="roomDetail.Number"
            ></el-input>
          </el-form-item>
          <el-form-item size="small" prop="address" label="房间价格">
            <el-input
              type="text"
              prefix-icon="el-icon-thumb"
              v-model.lazy="roomDetail.Price"
            ></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="success" @click="addRoom" size="medium "
              >立即添加</el-button
            >
          </el-form-item>
        </template>
        <template v-if="roomUpdataType === 0">
          <el-form-item label="房间类型">
            <el-select v-model="roomChangeType" placeholder="请选择更改的类型">
              <el-option
                v-for="type in roomTypeList"
                :key="type.id"
                :value="type.id"
                :label="type.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <template v-if=" roomChangeType != 'None' "> 
              <el-form-item size="small"  label="房间编号">
            <el-input
              type="text"
              prefix-icon="el-icon-thumb"
              v-model.lazy="temp.id"
              :placeholder="choosedRoom.id"
              disabled
            ></el-input>
          </el-form-item>    
          <el-form-item size="small"  label="房间名称">
            <el-input
              type="text"
              prefix-icon="el-icon-thumb"
              v-model.lazy="temp.name"
              :placeholder="choosedRoom.name"
            ></el-input>
          </el-form-item>
          <el-form-item size="small"  label="房间价格">
            <el-input
              type="text"
              prefix-icon="el-icon-thumb"
              v-model.lazy="temp.price"
              :placeholder="choosedRoom.price"
            ></el-input>
          </el-form-item>
          <el-form-item size="small"  label="房间数量">
            <el-input
              type="text"
              prefix-icon="el-icon-thumb"
              v-model.lazy="temp.number"
              :placeholder="choosedRoom.number"
            ></el-input>
          </el-form-item>
          <el-form-item size="small"  label="图片链接">
            <el-input
              type="text"
              prefix-icon="el-icon-thumb"
              v-model.lazy="temp.imgUrl"
              :placeholder="choosedRoom.imgUrl"
            ></el-input>
          </el-form-item>
           <el-form-item size="small"  label="房间介绍">
            <el-input
              type="text"
              prefix-icon="el-icon-thumb"
              v-model.lazy="temp.intro"
              :placeholder="choosedRoom.intro"
            ></el-input>
          </el-form-item>
          </template>
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit" size="medium "
              >立即添加</el-button
            >
          </el-form-item>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Updata",
  data() {
    return {
      updataType: 0,
      roomUpdataType: 1,
      roomChangeType: "None",
      temp:{
          id: '',
          name:'' ,
          number:'' ,
          price: '',
          imgUrl: '',
          intro: '',
      },
      roomTypes: [
        { id: 0, value: "修改类型" },
        { id: 1, value: "增加类型" },
        { id: 2, value: "删除类型" },
      ],
      roomDetail: {
        Name: "温馨大床房",
        Number: 10,
        Price: 158,
      },
      types: [
        { id: 0, value: "酒店资料" },
        { id: 1, value: "房间资料" },
      ],
      hotelDetail: {
        name: "xxxx",
        address: "xxxx",
        phone: "xxxxxxx",
        hotelImg: "xxxxxxx",
        hotelInfo: "xxxxxxxxx",
      },
      hotelRulesForm: {
        name: "",
        address: "",
        phone: "",
        hotelImg: "",
        hotelInfo: "",
      },
      hotelRules: {
        name: [{ type: "string", message: "请输入酒店名字", trigger: "blur" }],
        address: [
          {
            max: 20,
            type: "string",
            message: "请输入正确地址",
            trigger: "blur",
          },
        ],
        phone: [
          {
            min: 10,
            max: 11,
            type: "string",
            message: "请输入正确号码",
            trigger: "blur",
          },
        ],
        hotelImg: [
          { type: "string", message: "请上传正式图片", trigger: "blur" },
        ],
        hotelInfo: [
          {
            min: 8,
            max: 20,
            type: "string",
            message: "8-20字内介绍",
            trigger: "blur",
          },
        ],
      },
      roomTypeList: {
        room0: {
          id: 0,
          name: "温馨大床房",
          number: 10,
          price: 1538,
          imgUrl: "xxxxxxx",
          intro: "xxxxxx",
        },
        room1: {
          id: 1,
          name: "标准双人间",
          number: 16,
          price: 1518,
          imgUrl: "xxxxxxx",
          intro: "xxxxxx",
        },
        room2: {
          id: 2,
          name: "豪华大床房",
          number: 16,
          price: 1528,
          imgUrl: "xxxxxxx",
          intro: "xxxxxx",
        },
      },
    };
  },
  methods: {
    onSubmit() {
      alert("提交成功");
    },
    addRoom() {
      console.log("updataRoom");
    },
  },
  computed: {
    choosedRoom: {
      get() {
        var choosedRoomDetail;
        for (let roomobj in this.roomTypeList) {
          if (this.roomChangeType === this.roomTypeList[roomobj].id) {
            choosedRoomDetail = this.roomTypeList[roomobj];
            break;
          }
        }
        console.log(choosedRoomDetail)
        return choosedRoomDetail;
      },
      set(){
         
      }
    },
  },
};
</script>

<style scoped>
.formStyle {
  padding-left: 35.5%;
  margin-top: 100px;
  width: 50%;
  position: relative;
}
.mainInput {
  width: 295px;
}
</style>